<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Deepseek 聊天</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <style>
        .chat-container {
            height: calc(100vh - 160px);
        }
        .message {
            max-width: 80%;
            margin: 8px;
            padding: 12px;
            border-radius: 12px;
            white-space: pre-wrap;
            word-wrap: break-word;
            line-height: 1.5;
        }
        .user-message {
            background-color: #e3f2fd;
            margin-left: auto;
        }
        .ai-message {
            background-color: #f5f5f5;
            margin-right: auto;
            font-size: 14px;
        }
        .typing-indicator {
            display: inline-block;
            padding: 5px 10px;
        }
        .typing-indicator span {
            display: inline-block;
            width: 8px;
            height: 8px;
            margin: 0 2px;
            background-color: #90cdf4;
            border-radius: 50%;
            animation: bounce 1.4s infinite ease-in-out;
        }
        .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
        .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
        @keyframes bounce {
            0%, 80%, 100% { transform: translateY(0); }
            40% { transform: translateY(-8px); }
        }
    </style>
</head>
<body class="bg-gray-100">
    <div class="container mx-auto p-4">
        <h1 class="text-2xl font-bold text-center mb-4">Deepseek 智能助手</h1>
        
        <div class="bg-white rounded-lg shadow-lg p-4">
            <div id="chat-messages" class="chat-container overflow-y-auto mb-4">
                <!-- 消息将在这里动态添加 -->
            </div>
            
            <div class="flex gap-2">
                <input type="text" id="message-input" 
                    class="flex-1 p-2 border rounded-lg focus:outline-none focus:border-blue-500"
                    placeholder="输入您的问题...">
                <button id="send-button" 
                    class="px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors">
                    发送
                </button>
            </div>
        </div>
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();
        const messagesContainer = document.getElementById('chat-messages');
        const messageInput = document.getElementById('message-input');
        const sendButton = document.getElementById('send-button');
        let currentResponseDiv = null;

        function createTypingIndicator() {
            const indicator = document.createElement('div');
            indicator.className = 'message ai-message typing-indicator';
            indicator.innerHTML = '<span></span><span></span><span></span>';
            return indicator;
        }

        function addMessage(content, isUser = true) {
            const messageDiv = document.createElement('div');
            messageDiv.className = `message ${isUser ? 'user-message' : 'ai-message'}`;
            messageDiv.textContent = content;
            messagesContainer.appendChild(messageDiv);
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
            return messageDiv;
        }

        function updateMessage(messageDiv, content) {
            messageDiv.textContent = content;
            messagesContainer.scrollTop = messagesContainer.scrollHeight;
        }

        function setInputState(disabled) {
            messageInput.disabled = disabled;
            sendButton.disabled = disabled;
            if (disabled) {
                sendButton.classList.add('opacity-50');
            } else {
                sendButton.classList.remove('opacity-50');
            }
        }

        async function sendMessage() {
            const message = messageInput.value.trim();
            if (message) {
                setInputState(true);
                addMessage(message, true);
                
                // 添加打字指示器
                const typingIndicator = createTypingIndicator();
                messagesContainer.appendChild(typingIndicator);
                messagesContainer.scrollTop = messagesContainer.scrollHeight;
                
                socket.emit('sendMessage', message);
                messageInput.value = '';
            }
        }

        sendButton.addEventListener('click', sendMessage);
        messageInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault();
                sendMessage();
            }
        });

        socket.on('receiveMessage', (data) => {
            console.log('收到消息:', data);
            // 移除打字指示器
            const typingIndicator = messagesContainer.querySelector('.typing-indicator');
            if (typingIndicator) {
                console.log('移除打字指示器');
                typingIndicator.remove();
            }

            if (data.type === 'start') {
                console.log('开始新的响应');
                // 创建新的响应 div
                currentResponseDiv = addMessage('', false);
            } else if (data.type === 'chunk') {
                console.log('收到内容块:', data.content);
                // 在当前响应 div 中追加内容
                if (currentResponseDiv) {
                    const newContent = currentResponseDiv.textContent + data.content;
                    currentResponseDiv.textContent = newContent;
                    messagesContainer.scrollTop = messagesContainer.scrollHeight;
                } else {
                    console.warn('警告: 收到内容块但没有当前响应 div');
                }
            } else if (data.type === 'end') {
                console.log('响应结束');
                setInputState(false);
            } else {
                console.log('收到普通消息');
                // 兼容非流式响应
                addMessage(data.content, false);
                setInputState(false);
            }
        });

        socket.on('error', (error) => {
            console.error('收到错误:', error);
            // 移除打字指示器
            const typingIndicator = messagesContainer.querySelector('.typing-indicator');
            if (typingIndicator) {
                typingIndicator.remove();
            }

            addMessage(`错误: ${error}`, false);
            setInputState(false);
        });
    </script>
</body>
</html> 